<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/04.css">
</head>
<body>
    <ol>
        <li>混合选择器本质是基于，标签结构、混合关键字和基本选择器形成的元素选择的排列组合</li>
        <li>混合关键字：一组确定的标识符，用于描述不同标签位置关系</li>
        <li>关键字 , ：对不同的基本选择器描述的元素提供相同的css样式定义</li>
        <li>关键字 控格 ：基于元素结构设置后代元素选择功能(后代选择器)【限定范围选择元素】</li>
        <li>关键字 > ：基于元素结构设置子元素选择功能(子元素选择器)</li>
        <li>关键字 + ：基于元素结构设置同级相邻选择功能(同级且相邻的元素选择器-向下)</li>
        <li>关键字 ~ ：基于元素结构设置同级选择功能(同级的元素选择器-向下)</li>
        <li>关键字 无 ：并且关系选择器，要求元素同时满足多个选择规则(标签选择器只能出现第一个)</li>
    </ol>
    <hr>

    <p id="p">设置颜色为红色</p>
    <div class="a">设置颜色为红色</div>
    <strong>设置颜色为红色</strong>
    <hr>

    <p>p元素</p>
    <br>
    <div class="b">
        <p>div内部的p元素</p>
        <div>
            <p>div内部的内部的p元素</p>
            <div>
                <p>div内部的内部的内部的p元素</p>
            </div>
            <ul>
                <li>
                    <p>div内部的ul里面的p元素</p>
                </li>
            </ul>
        </div>
    </div>
    <br>
    <div>
        <p>div内部的p元素</p>
        <div>
            <p>div内部的内部的p元素</p>
        </div>
    </div>
    <hr>

    <div class="c">
        <p>.c div的子元素 p</p>
        <div>
            <p>.c div内部的div内部的元素 p</p>
        </div>
    </div>

    <hr>
    <!-- 元素均属于同一个父元素的元素，被叫做同级元素 -->
    <p class="p-d">段落元素</p>
    <p class="p-c">段落元素</p>
<!--    <span>aaa</span>-->
    <p class="p-d">段落元素</p>

    <hr>
    <p class="p-f">段落元素</p>
    <p class="p-e">段落元素</p>
    <p class="p-f">段落元素</p>
    <span>aaa</span>
    <p class="p-f">段落元素</p>

    <hr>
    <p class="e" id="p1">测试并且关系选择器1</p>
    <p class="e">测试并且关系选择器2</p>
</body>
</html>